import React from 'react';
import { Input, message } from 'antd';
// @ts-ignore
import { TIME_96 } from '@/pages/ETrade/components/helper';

const TimeSlotInput: React.FC<ITimeSlotInputProps> = (props) => {
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let inputValue = e.target.value;

    inputValue = inputValue.replace(/[^0-9]/g, '');

    if (inputValue.length === 4) {
      if (!TIME_96.includes(inputValue)) {
        message.warning(`${inputValue}时间段输入不符合规范`);
      }
    }

    props.onChange && props.onChange(inputValue);
  };

  return (
    <Input
      style={{ fontSize: 12 }}
      onChange={onChange}
      value={props.value}
      size="small"
      maxLength={4}
      {...props.inputProps}
    />
  );
};

interface ITimeSlotInputProps {
  value?: any;
  onChange?: (value: any) => void;
  inputProps?: any;
}

export default TimeSlotInput;
